<script lang="ts" setup>
import { computed, defineAsyncComponent } from 'vue';
import { ChartType } from '@/types/block';

const props = defineProps<{
    type: ChartType
}>()

const renderer = computed(() => {
    switch (props.type) {
        case 'd3':
            return defineAsyncComponent(() => import('./D3/D3Renderer.vue'))
        case 'echarts':
            return defineAsyncComponent(() => import('./ECharts/EChartsRenderer.vue'))
        case 'zRender':
            return defineAsyncComponent(() => import('./ZRender/ZRenderRenderer.vue'))
        default:
            return defineAsyncComponent(() => import('./ECharts/EChartsRenderer.vue'))
    }
})

</script>

<template>
    <component :is="renderer"></component>
</template>